<template>
  <el-dialog
    title="信号定义"
    v-model="dialogVisible"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @closed="$emit('close')"
  >
    <div class="flex flex-row items-center mb-2">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="0">
      <el-table :data="formData.signal">
        <el-table-column label="scope" width="180" align="center">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'signal.' + $index + '.scope'"
              :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
            >
              <el-select v-model="row.scope">
                <el-option label="全局" value="start" />
                <el-option label="流程实例" value="end" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="id" width="200" align="center">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'signal.' + $index + '.id'"
              :rules="{ required: true, message: '请输入', trigger: ['blur', 'change'] }"
            >
              <el-input v-model="row.id" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'signal.' + $index + '.name'"
              :rules="{ required: true, message: '请输入', trigger: ['blur', 'change'] }"
            >
              <el-input v-model="row.name" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="60">
          <template #default="{ $index }">
            <el-icon size="26" color="red" @click="handleDel($index)">
              <CircleCloseFilled />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref, onMounted, defineProps } from 'vue';
  import mixinPanel from '../../../common/mixinPanel';

  const props = defineProps({
    modeler: {
      type: Object,
      required: true,
    },
    element: {
      type: Object,
      required: true,
    },
    categorys: {
      type: Array,
      default: () => [],
    },
  });

  const dialogVisible = ref(true);
  const formRef = ref(null);
  const formData = ref({
    signal: [],
  });
  const formRules = ref({});

  const { updateProperties } = mixinPanel(props.modeler, props.element, formData);

  onMounted(() => {
    formData.value.signal =
      props.element.businessObject.extensionElements?.values
        .filter((item) => item.$type === 'bpmn:Signal')
        .map((item) => {
          return {
            scope: item.scope,
            id: item.id,
            name: item.name,
          };
        }) ?? [];
  });

  function updateElement() {
    if (formData.value.signal?.length) {
      let extensionElements = props.element.businessObject.get('extensionElements');
      if (!extensionElements) {
        extensionElements = props.modeler.get('moddle').create('bpmn:ExtensionElements');
      }
      // 清除旧值
      extensionElements.values =
        extensionElements.values?.filter((item) => item.$type !== 'bpmn:Signal') ?? [];
      formData.value.signal.forEach((item) => {
        const signal = props.modeler.get('moddle').create('bpmn:Signal');
        signal['scope'] = item.scope;
        signal['id'] = item.id;
        signal['name'] = item.name;
        extensionElements.get('values').push(signal);
      });
      updateProperties({ extensionElements: extensionElements });
    } else {
      const extensionElements = props.element.businessObject[`extensionElements`];
      if (extensionElements) {
        extensionElements.values =
          extensionElements.values?.filter((item) => item.$type !== 'bpmn:Signal') ?? [];
      }
    }
  }

  function handleAdd() {
    formData.value.signal.push({
      scope: null,
      id: null,
      name: null,
    });
  }

  function handleDel(idx) {
    formData.value.signal.splice(idx, 1);
  }

  function closeDialog() {
    formRef.value.validate((valid) => {
      if (valid) {
        updateElement();
        dialogVisible.value = false;
      }
    });
  }
</script>

<style scoped lang="scss"></style>
